<template>
  <div>
    <van-nav-bar title="搜索" left-arrow @click-left="onClickLeft" class="bar" />
    <van-search
      v-model="value"
      class="search"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="content">
      <div v-if="isSearch">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell
              icon="label-o"
              v-for="(item,index) in bdlist"
              :key="index"
              :title="item.title"
              is-link
              :to="`/detail/${item.id}`"
            />
          </van-list>
        </van-pull-refresh>
      </div>
      <div v-else>
        <p class="con">热门搜索：</p>
        <van-tag
          type="primary"
          size="large"
          v-for="(item,index) in typelist"
          :key="index"
          class="tag"
          @click="hotSearch(index,item.id)"
        >{{item.name}}</van-tag>
        <p class="con">
          搜索历史：
          <van-icon name="delete" class="delete" @click="clearAll" />
        </p>
        <van-tag
          closeable
          size="medium"
          plain
          color="#686464"
          v-for="(item,index) in hisArr"
          :key="index"
          @click="hisFn(item)"
          @close="close(item)"
          class="tag"
        >{{item}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { setZXHS, getZXHS } from "../utils/search";
import { Dialog } from "vant";
export default {
  name: "search",
  data() {
    return {
      value: "",
      loading: false,
      finished: false,
      refreshing: false,
      isSearch: false,
      ids: 0,
      hisArr: []
    };
  },
  methods: {
    ...mapActions("search", ["getType", "getbdFn", "clearFn"]),
    onClickLeft() {
      this.$router.back();
    },
    //点击历史
    hisFn(val) {
      this.value = val;
      this.onSearch();
      setZXHS(val);
      this.hisArr = getZXHS();
    },
    //删除全部历史
    clearAll() {
      Dialog.confirm({
        title: "提示你一下",
        message: "是否确认清空历史搜索"
      })
        .then(() => {
          setZXHS("", true);
          this.hisArr = getZXHS();
        })
        .catch(() => {});
    },
    //删除单个历史
    close(val) {
      setZXHS(val, true);
      this.hisArr = getZXHS();
    },
    //搜索
    onSearch() {
      let arr = this.typelist.filter(item => {
        return item.name == this.value;
      });
      if (arr[0]) {
        for (let i = 0; i < this.typelist.length; i++) {
          if (this.typelist[i].name == this.value) {
            this.ids = this.typelist[i].id;
          }
        }
        this.isSearch = true;
        this.onLoad();
      } else {
        Dialog.alert({
          title: "提示你一下",
          message: "没有关于" + this.value + "的内容"
        }).then(() => {});
      }
      setZXHS(this.value);
      this.hisArr = getZXHS();
    },
    //热门
    hotSearch(idx, ids) {
      this.value = this.typelist[idx].name;
      this.ids = ids;
      this.isSearch = true;
      this.onLoad();
      setZXHS(this.typelist[idx].name);
      this.hisArr = getZXHS();
    },
    async onLoad() {
      // setTimeout(() => {
      if (this.refreshing) {
        this.isSearch = false;
        this.value = "";
        this.clearFn();
        this.refreshing = false;
      }
      await this.getbdFn(this.ids);
      if (this.bdlist.length == this.total) {
        this.finished = true;
      }
      // },1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  },
  computed: {
    ...mapState("search", ["typelist", "bdlist", "total"])
  },
  mounted() {
    this.getType();
    this.hisArr = getZXHS();
  }
};
</script>

<style lang="scss" scoped>
.bar {
  position: fixed;
  width: 100%;
  top: 0;
}
.search {
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 46px;
}
.content {
  position: absolute;
  top: 100px;
  bottom: 0;
  overflow-y: auto;
  width: 100%;
}
.con {
  margin: 15px 12px 5px 12px;
  padding-right: 10px;
}
.tag {
  margin-left: 16px;
  margin-top: 7px;
  margin-right: 2px;
}
.delete {
  font-size: 25px;
  position: absolute;
  right: 15px;
}
</style>